<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/common/taglibs.jsp"%>
<script type="text/javascript" src="${ctx}/js/page.js"></script>
<script type="text/javascript">
var code; //在全局 定义验证码  
function createCode() {
	code = "";
	var codeLength = 6;//验证码的长度  
	var checkCode = document.getElementById("checkCode");
	var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z");//所有候选组成验证码的字符，当然也可以用中文的  
	for (var i = 0; i < codeLength; i++) {
		var charIndex = Math.floor(Math.random() * 36);
		code += selectChar[charIndex];
	}  
//       alert(code);  
	if (checkCode) {
		checkCode.className = "code";
		checkCode.value = code;
	}
}
 function validate()
     {  
       var inputCode = document.getElementById("authcode").value;  
       if(inputCode.length <=0)  
       {  
           alert("请输入验证码！");
           document.comment.authcode.focus();
           return false;   
       }  
       else if(inputCode != code )  
       {  
          alert("验证码输入错误！");  
          createCode();//刷新验证码
          document.comment.authcode.focus();
          return false;  
       }  
       else  
       {  
         return true;  
       }     
    }  
</script>
<style>
<!--
#page-wrap {
	margin: 20px auto;
	width: 616px;
}

#comment-content {
	margin: 5px auto;
	width: 780px;
}

textarea#styled {
	width: 600px;
	height: 80px;
	border: 3px solid #cccccc;
	padding: 5px;
	font-family: Tahoma, sans-serif;
	background-image: url(images/commentbg.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

input#styled1 {
	width: 600px;
	border: 3px solid #cccccc;
	padding: 5px;
	font-family: Tahoma, sans-serif;
}

input#authcode {
	width: 150px;
	border: 3px solid #cccccc;
	padding: 5px;
	font-family: Tahoma, sans-serif;
}

.floatright {
	float: right;
	margin-bottom: 25px;
}

.code {
	background-image: url(code.jpg);
	font-family: Arial;
	font-style: italic;
	color: Red;
	border: 0;
	padding: 2px 3px;
	letter-spacing: 3px;
	font-weight: bolder;
}

.unchanged {
	border: 0;
}
-->
</style>
<div id="bottompanel">
	<div id="page-wrap">
		<form id="comment" name="comment" action="issueComment" method="post"
			onsubmit="return validate()">
			<input type="hidden" name="articleId"
				value="${requestScope.ARTICLE.articleId}" />
			<h6>
				请发表对本文的评论:
			</h6>
			<input type="text" name="articleTitle" id="styled1"
				value="Re:${requestScope.ARTICLE.articleTitle}">
			<br />
			<textarea name="content" id="styled"
				onFocus="if (this.value == '请输入评论内容...') {this.value = '';};"
				onBlur="if (this.value == '') {this.value = '请输入评论内容...';};">请输入评论内容...</textarea>
			<br />

			<input type="text" onclick="createCode()" readonly="readonly"
				id="checkCode" class="unchanged" style="width: 80px" />
			<br />
			<input type="text" id="authcode" name="authcode"
				value="请输入上方的数字或字母..."
				onFocus="if (this.value == '请输入上方的数字或字母...') {this.value = '';};"
				onBlur="if (this.value == '') {this.value = '请输入上方的数字或字母...';};" />
			<br />

			<input type="image" value="提交" src="images/submit.gif"
				class="floatright" />
		</form>
	</div>
</div>
<div id="content">
	<s:action name="getComment" namespace="/template"></s:action>
	<div id="comment-content">
		<br />
		<div>
			用户评论：
		</div>
		<c:choose>
		<c:when test="${pm.result eq null}">
			暂时没有相关评论!
		</c:when>
		<c:otherwise>
		<c:forEach var="comment" items="${pm.result}"
			varStatus="status">
			<br />
			<table width="100%" border="0" cellpadding="4" cellspacing="0"
				style="border: 1px; border-color: black; border-style: solid;">
				<tr bgcolor="#cccccc">
					<td class="text">
						<span class="blackTitle">${status.index+1}</span>楼
					</td>
					<td class="text">
						<span class="blackTitle">评论标题</span>：${comment.articleCommentTitle}
					</td>
					<td align="right" class="text">
						<span class="blackTitle">用户</span>：${comment.userName}&nbsp;
						<span class="blackTitle">评论时间</span>：<fmt:formatDate value="${comment.commentCreateTime}" pattern="yyyy年MM月dd日" />
					</td>
				</tr>
				<tr>
					<td class="text" colspan="2">
						${comment.articleCommentContent}
					</td>
				</tr>
			</table>
		</c:forEach>
		</c:otherwise>
		</c:choose>
		<br />
		<!-- 分页信息 -->
		<div align="right">
			<c:if test="${pm.result ne null}">
				<script>
         	var pg = new showPages('pg');
         	pg.pageCount = ${pm.maxPage};
         	pg.argName = 'currentPage';
         	pg.printHtml();
         </script>
			</c:if>
		</div>
		<br />
	</div>
</div>